<!-- Description -->
<section class="card">
    <div class="card-header">
        <h4 class="card-title">Description</h4>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <p>The disabled navigation option allow you to disable certain level horizontal navigation link.</p>
            </div>
            <div class="alert bg-success alert-icon-left mb-2" role="alert">
                <span class="alert-icon"><i class="la la-pencil-square"></i></span>
                <strong>Experience it!</strong>
                <p>Below example has the disabled dashboard menu, you can add this disabled menu class to any menu or level to disable it. <a href="https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/html/ltr/horizontal-menu-template/horizontal-nav-disabled.html" target="_blank" class="white">horizontal-nav-disabled.html</a></p>
            </div>
        </div>
    </div>
</section>
<!--/ Description -->
<!-- Example -->
<section id="examples" class="card">
    <div class="card-header">
        <h4 class="card-title">Examples</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <p>Classic dark</p>
                <div class="header-navbar navbar-expand-sm menu-icon-right navbar navbar-horizontal navbar-dark navbar-shadow border-grey border-darken-2">
                    <!-- Horizontal menu content-->
                    <div data-menu="menu-container" class="header-navbar navbar-expand-sm navbar-container ml-0">
                        <ul id="main-menu-navigation1" data-menu="menu-navigation" class="nav navbar-nav">
                            <li class="nav-item"><a href="index.html" class="nav-link disabled"><i class="ft-home"></i><span>Dashboard</span></a></li>
                            <li data-menu="megamenu" class="dropdown mega-dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-tv"></i><span>Mega Menu</span></a>
                                <ul class="mega-dropdown-menu dropdown-menu row">
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>First Link col-1</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>Second Link col-1 link</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>Third Link col-1</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>Fourth Link col-1</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 2 title
                    </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>First Link col-2</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>Second Link col-2</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 3</a>
                                                                        <ul class="mega-menu-sub">
                                                                            <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 2</a>
                                                                            </li>
                                                                            <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 2</a>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>Third Link col-2</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>Fourth Link col-2</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 3 title
                    </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>First Link col-3</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>Second Link col-3</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>Third Link col-3</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>Fourth Link col-3</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-mega-col="col-md-3" class="col-md-3">
                                        <h6 data-toggle="dropdown" class="dropdown-menu-header text-uppercase"><i class="la la-cog"></i>Column 4 title
                    </h6>
                                        <ul class="drilldown-menu">
                                            <li class="menu-list">
                                                <ul class="mega-menu-sub">
                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>First Link col-4</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>Second Link col-4</a>
                                                        <ul class="mega-menu-sub">
                                                            <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 2</a>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 2 link</a>
                                                                <ul class="mega-menu-sub">
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 3</a>
                                                                    </li>
                                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 3</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>submenu level 2</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>Third Link col-4</a>
                                                    </li>
                                                    <li><a href="#" class="dropdown-item"><i class="la la-umbrella"></i>Fourth Link col-4</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-cog"></i><span>Menu Large</span></a>
                                <ul class="dropdown-menu">
                                    <li class=" navigation-header"><span>Main</span></li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                    <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                        <ul class="dropdown-menu">
                                            <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                            </li>
                                            <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                                <ul class="dropdown-menu">
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                </ul>
                            </li>
                            <li data-menu="dropdown" class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"><i class="la la-tv"></i><span>Menu levels</span></a>
                                <ul class="dropdown-menu">
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item disabled">Second level</a>
                                    </li>
                                    <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Second level with child</a>
                                        <ul class="dropdown-menu">
                                            <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Third level</a>
                                            </li>
                                            <li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle">Third level with child</a>
                                                <ul class="dropdown-menu">
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item disabled">Fourth level</a>
                                                    </li>
                                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Fourth level</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li data-menu=""><a href="#" data-toggle="dropdown" class="dropdown-item">Second level</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <ul class="nav navbar-nav float-right">
                            <li class="dropdown dropdown-language nav-item"><a id="dropdown-flag1" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link"><i class="flag-icon flag-icon-gb"></i><span class="selected-language">English</span><i class="caret"></i></a>
                                <div aria-labelledby="dropdown-flag" class="dropdown-menu dropdown-menu-right"><a href="#" class="dropdown-item"><i class="flag-icon flag-icon-gb"></i> English</a><a href="#" class="dropdown-item"><i class="flag-icon flag-icon-es"></i> Spanish</a><a href="#" class="dropdown-item"><i class="flag-icon flag-icon-pt"></i> Portuguese</a>
                                    <a href="#" class="dropdown-item"><i class="flag-icon flag-icon-fr"></i> French</a>
                                </div>
                            </li>
                            <li class="dropdown dropdown-user nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link dropdown-user-link"><span class="avatar avatar-online"><img src="../../../app-assets/images/portrait/small/avatar-s-1.png" alt="avatar"><i></i></span>
                <h6 class="user-name"> John Doe</h6><i class="caret"></i></a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="#" class="dropdown-item"><i class="ft-user"></i> Edit Profile</a>
                                    <a href="#" class="dropdown-item"><i class="ft-mail"></i> My Inbox</a>
                                    <a href="#" class="dropdown-item">
                                        <i class="ft-check-square"></i> Task</a>
                                    <a href="#" class="dropdown-item"><i class="ft-message-square"></i> Calender</a>
                                    <div class="dropdown-divider"></div>
                                    <a href="#" class="dropdown-item"><i class="ft-power"></i> Logout</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- /horizontal menu content-->
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Example -->
<!-- CSS Classes -->
<section id="css-classes" class="card">
    <div class="card-header">
        <h4 class="card-title">CSS Classes</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <p>This table contains class to disable navigation menu link.</p>
                <p>All these options can be set via following classes:</p>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Classes</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row"><code>.disabled</code></th>
                                <td>To disabled vertical navigation menu link, you need to add <code>.disabled</code> class in navigation <code>&lt;li&gt;</code> tag. Refer HTML markup line no 12.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
<!--/ CSS Classes -->
<!-- HTML Markup -->
<section id="html-markup" class="card">
    <div class="card-header">
        <h4 class="card-title">HTML Markup</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <p>This section contains HTML Markup to create vertical bordered navigation. It define where to add css classes to make vertical bordered navigation.</p>
                <ul>
                    <li><span class="text-bold-600">Line no 16, 22 & 54:</span> Contain the <code>.disabled</code> class, Line 16 shows to disabled parent menu item and Line 22 & 54 shows disabled child menu item.</li>
                </ul>
                <pre data-line="16, 22, 54" class="language-markup">
          <code class="language-markup">
            &lt;!DOCTYPE html&gt;
            &lt;html lang="en"&gt;
            &lt;head&gt;&lt;/head&gt;
            &lt;body data-open="click" data-menu="horizontal-menu" class="horizontal-layout horizontal-menu 1-column menu-expanded"&gt;

            &lt;!-- navbar-static-top--&gt;
            &lt;nav role="navigation" class="header-navbar navbar-expand-sm navbar navbar-with-menu navbar-static-top navbar-dark navbar-shadow navbar-border"&gt;
            ...
            &lt;/nav&gt;

            &lt;!-- START  Horizontal navigation --&gt;
            &lt;div role="navigation" data-menu="menu-wrapper" class="header-navbar navbar-expand-sm menu-icon-right navbar navbar-horizontal navbar-dark navbar-shadow border-grey border-darken-2"&gt;
            &lt;!-- Horizontal menu content--&gt;
            &lt;div data-menu="menu-container" class="navbar-container"&gt;
            &lt;ul id="main-menu-navigation" data-menu="menu-navigation" class="nav navbar-nav"&gt;
            &lt;li class="nav-item"&gt;&lt;a href="index.html" class="nav-link disabled"&gt;&lt;i class="la la-home"&gt;&lt;/i&gt;&lt;span&gt;Dashboard&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li data-menu="dropdown" class="dropdown nav-item"&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link"&gt;&lt;i class="la la-tv"&gt;&lt;/i&gt;&lt;span&gt;My Menu&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
            &lt;li class=" navigation-header"&gt;&lt;span&gt;Main&lt;/span&gt;&lt;/li&gt;
            &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;
            &lt;/li&gt;
            &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item disabled"&gt;Second level&lt;/a&gt;
            &lt;/li&gt;
            &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;
            &lt;/li&gt;
            &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;
            &lt;/li&gt;
            &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;
            &lt;/li&gt;
            &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;
            &lt;/li&gt;
            &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;
            &lt;/li&gt;
            &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;
            &lt;/li&gt;
            &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;
            &lt;/li&gt;
            &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;
            &lt;/li&gt;
            &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;
            &lt;/li&gt;
            &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;
            &lt;/li&gt;
            &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;
            &lt;/li&gt;
            &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;
            &lt;/li&gt;
            &lt;li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle"&gt;Second level with child&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
            &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Third level&lt;/a&gt;
            &lt;/li&gt;
            &lt;li data-menu="dropdown-submenu" class="dropdown dropdown-submenu"&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item dropdown-toggle"&gt;Third level with child&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
            &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item disabled"&gt;Fourth level&lt;/a&gt;
            &lt;/li&gt;
            &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Fourth level&lt;/a&gt;
            &lt;/li&gt;
            &lt;/ul&gt;
            &lt;/li&gt;
            &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li data-menu=""&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-item"&gt;Second level&lt;/a&gt;
            &lt;/li&gt;
            &lt;/ul&gt;
            &lt;/li&gt;
            &lt;/ul&gt;
            &lt;/div&gt;
            &lt;!-- /horizontal menu content--&gt;
            &lt;/div&gt;
            &lt;!-- END  Horizontal navigation --&gt;

            &lt;!-- BEGIN Content--&gt;
            &lt;div class="content app-content"&gt;
            &lt;div class="content-wrapper"&gt;
            &lt;!-- content header--&gt;
            &lt;div class="content-header row"&gt;
            ...
            &lt;/div&gt;
            &lt;!-- content header--&gt;

            &lt;!-- content body--&gt;
            &lt;div class="content-body"&gt;
            ...
            &lt;/div&gt;
            &lt;!-- content body--&gt;

            &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- END Content--&gt;

            &lt;!-- START FOOTER DARK--&gt;
            &lt;footer class="footer footer-dark"&gt;
            ...
            &lt;/footer&gt;
            &lt;!-- START FOOTER DARK--&gt;

            &lt;/body&gt;
            &lt;/html&gt;
          </code>
        </pre>
            </div>
        </div>
    </div>
</section>
<!--/ HTML Markup -->
<!-- PUG Code -->
<section id="pug-configuration" class="card">
    <div class="card-header">
        <h4 class="card-title">PUG Configuration</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body">
            <div class="card-text">
                <p>Modern Admin use PUG as template engine to generate pages and whole template quickly using node js, for getting start with PUG usage & template generating process please refer template documentation.</p>
                <h5 class="card-title mt-2">Menu JSON Configurations</h5>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Options</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row"><code>classlist</code></th>
                                <td>Is the name of menu object, you can add any classes realted to that navigation link. To disable add <code>disabled</code>.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <h5 class="card-title mt-2">PUG Code</h5>
                <p>You need to add navigation disabled link options to menu JSON object, please read the documentation to customize the menu using PUG.</p>
                <ul>
                    <li><span class="text-bold-600">Line no 18, 22 & 28:</span> Contain disabled navigation link JSON configurations options.</li>
                </ul>
                <p>Modern Admin use the common menu JSON object to generate same menu on each pages of your template that will save your time by reducing the repetitive menu customization task on each page. This template has menu example pug file for every layouts, Here in below example, it shows vertical menu layout menu PUG file <code>vertical-menu.pug</code>, you can use it on template level only it will generate whole template with the same menu options.</p>
                <pre data-line="18, 22, 28" data-line-offset="12" class="language-json">
          <code class="language-json">
            +horizontalMenu([

            //- Dashbaord
            {url:"index.html",name:"Dashboard",slug:"dashboard",icon:"la la-home",  classlist:"disabled"},

            //- Dropdown Menu Start
            {url:"#", name:"Menu levels", icon:"la la-tv", slug:"", dropdown:"1",
            //- Menu Levels Submenu
            submenu:[
            {url:"#", name:"Second level", slug:"", classlist:"disabled"},
            {url:"#", ame:"Second level with child", slug:"",
            submenu:[
            {url:"#", name:"Third level", slug:""},
            {url:"#", name:"Third level with child", slug:"",
            submenu:[
            {url:"#", name:"Fourth level", slug:"", classlist:"disabled"},
            {url:"#", name:"Fourth level", slug:""},
            ]
          },
          ]
        },
        {url:"#",name:"Second level",slug:""},
        ]
      },
      //- Dropdown Menu End
      ]);
    </code>
  </pre>
            </div>
        </div>
    </div>
</section>
<!--/ PUG Code -->
